<template>
  <div class="person">
    ???
  </div>
  
</template>



<script lang="ts" setup name="Person">
// PersonInter 飘红
// import {a, PersonInter} from '@/types'
import {type PersonInter, type Persons} from '@/types'

// 不能打印一种约束，一种规范,偏红
//console.log(PersonInter)

let person: PersonInter = {id: 'saodsjoj2332', name: 'John', age: 60}

// let personList: PersonInter[] = [
//   {id: '123', name: 'John', age: 60},
//   {id: '456', name: 'Mary', age: 50},
//   {id: '789', name: 'Tom', age: 40}
// ]

// let personList: Array<PersonInter> = [
//   {id: '123', name: 'John', age: 60},
//   {id: '456', name: 'Mary', age: 50},
//   {id: '789', name: 'Tom', age: 40}
// ]

let personList: Persons = [
  {id: '123', name: 'John', age: 60},
  {id: '456', name: 'Mary', age: 50},
  {id: '789', name: 'Tom', age: 40}
]

</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px
}

button {
  margin: 0 5px;
}
li {
  font-size: 20px;
}
</style>